<template>
 <div class="app-container">
    <el-tabs :value="activeTab" @tab-click="changeTab">
      <el-tab-pane  label="黑名单列表" name="1" v-if="roleCheck('account-blacklist')">
        <!-- <span slot="label">账号黑名单</span> -->
        <blackAccount v-show="activeTab==='1'" :value="activeTab==='1'"/>
      </el-tab-pane>
      <el-tab-pane  label="黑名单群组设置" name="2"  v-if="roleCheck('blacklist-level-set')">
        <setLeval v-show="activeTab==='2'"  :value="activeTab==='2'"/>
      </el-tab-pane>
      <el-tab-pane label="黑名单调整记录" name="3"  v-if="roleCheck('blacklist-log')">
        <levalRecord v-show="activeTab==='3'"  :value="activeTab==='3'"/>
      </el-tab-pane>
      <el-tab-pane  label="黑名单统计报表" name="4" v-if="roleCheck('blacklist-statistic')" >
        <statistic v-show="activeTab==='4'"  :value="activeTab==='4'"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import blackAccount from './blackAccount';
// import blackIp from './blackIp';
import setLeval from './setLeval';
import levalRecord from './levalRecord';
import statistic from './statistic';

export default {
  name: 'risk-black-list',
  components: {
    blackAccount,
    // blackIp,
    setLeval,
    levalRecord,
    statistic,
  },
  data() {
    return {
      activeTab: '1',
    };
  },
  mounted() { // tab页记录访问日志
    this.$store.dispatch(types.GET_LEVEL_LIST);
    this.$store.dispatch(types.GET_USER_LEVEL_LIST);

    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '风控黑名单', true) });
    if (!this.roleCheck('account-blacklist') && this.roleCheck('blacklist-level-set')) {
      this.activeTab = '2';
    } else if (!this.roleCheck('account-blacklist') && !this.roleCheck('blacklist-level-set') && this.roleCheck('blacklist-log')) {
      this.activeTab = '3';
    } else if (!this.roleCheck('account-blacklist') && !this.roleCheck('blacklist-level-set') && !this.roleCheck('blacklist-log') && this.roleCheck('blacklist-statistic')) {
      this.activeTab = '4';
    }
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab.name;
      // tab页记录访问日志;
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, tab.label, true) });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
